import React, {Component} from 'react';
import {
    Form,
    Icon,
    Input,
    Button,
    Row,
    Col,
    Select,
    message,
    Card,
    Layout,
    Table,
    List,
    Divider,
    Popconfirm
} from 'antd';
import './Home.css';
import Keys from "../../config/Keys";
import CRUDStateFlowService from "../../service/CRUDStateFlowService";

class Home extends Component {

    state = {};

    userInfo = {};

    displaySecret = '**********';
    displaySecretButName = '显示';


    columns = [
        {title: 'ID', dataIndex: 'id', key: '1'},
        {title: '名称', dataIndex: 'name', key: '5'},
        {title: '创建时间', dataIndex: 'createDate', key: '2'},
        {title: '最新编辑时间', dataIndex: 'modifyDate', key: '3'},
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            render: (text, record) => (

                <span>
                    <a href="javascript:;" onClick={() => {

                        let param = {
                            stateFlowConfig: record,
                            operator: 'UPDATE'
                        };
                        let context = this.props.context;
                        context.openPage(context.PAGE_CODES.ADD_STATE_FLOW, param);

                    }}>编辑</a>

                    <Divider type="vertical"/>

                    <Popconfirm
                        title="确认要进行该操作吗?"
                        onConfirm={() => {
                            CRUDStateFlowService.remove(
                                {
                                    accessKey: this.userInfo.accessKey,
                                    id: record.id
                                },
                                () => {
                                    message.success("操作成功");
                                    this.queryStateFlow();
                                }
                            )
                        }}
                        okText="是"
                        cancelText="否"
                    >
                    <a href="javascript:;">删除</a>
                    </Popconfirm>

                </span>
            ),
        },
    ];


    /**
     * 在渲染前调用
     * */
    componentWillMount() {
        this.userInfo = this.props.context.userInfo;
        this.queryStateFlow();
    }


    refresh() {
        this.setState({
            ...this.state
        });
    }


    queryStateFlowReq = {
        accessKey: '',
        configId: '',
        configName: ''
    };

    stateFlowData = [];

    /** 获取状态流转配置数据 */
    queryStateFlow() {

        this.queryStateFlowReq.accessKey = this.userInfo.accessKey;
        CRUDStateFlowService.query(
            this.queryStateFlowReq,
            (res) => {
                this.stateFlowData = res.data;
                this.refresh();
            }
        );
    }

    render() {

        const {getFieldDecorator} = this.props.form;

        return (

            <div style={{display: 'grid'}}>

                <Card title={'开发者信息'} type="inner">
                    <div className={'home-dev-content'}>

                        <Col span={6}>

                            <label className={'home-dev-label-title'}>
                                AccessKey :
                            </label>
                            <label>{this.userInfo.accessKey}</label>

                        </Col>


                        <Col span={10}>

                            <label className={'home-dev-label-title'}>
                                AccessSecret :
                            </label>
                            <label>{this.displaySecret}</label>
                            <a onClick={() => {
                                if (this.displaySecretButName === '显示') {
                                    this.displaySecret = this.userInfo.accessSecret;
                                    this.displaySecretButName = '隐藏';
                                } else {
                                    this.displaySecret = '**********';
                                    this.displaySecretButName = '显示';
                                }

                                this.refresh();

                            }}> {this.displaySecretButName} </a>

                        </Col>

                    </div>
                </Card>


                {/*<div style={{background:'#f5f5f5',height:'1px',marginTop:'30px'}}></div>*/}


                <Card
                    title={'状态流转配置列表'}
                    type="inner"
                    style={{marginTop: '50px'}}
                    bodyStyle={{padding: '0px'}}>

                    <Row>

                        <Col span={2} className={'home-config-col'}>
                            <Button
                                icon="plus-circle"
                                onClick={() => {
                                    let context = this.props.context;
                                    context.openPage(Keys.PAGE_CODES.ADD_STATE_FLOW, null);
                                }}>
                                状态流转配置
                            </Button>
                        </Col>

                        <Col span={10}/>

                        <Col span={11} className={'home-config-col'}>

                            <span>ID ：</span>
                            <Input
                                placeholder={'根据ID查询'}
                                className={'home-config-input'}
                            />

                            <span>名称 ：</span>
                            <Input
                                placeholder={'支持模糊查询'}
                                className={'home-config-input'}
                            />

                            <Button type={'primary'} icon="search"
                                    onClick={() => {
                                        console.log('aa')
                                    }}>
                                查询
                            </Button>
                        </Col>
                    </Row>

                    <Table
                        rowKey='ID'
                        columns={this.columns}
                        dataSource={this.stateFlowData}
                    />

                </Card>


            </div>
        );
    }
}

const HomeForm = Form.create({name: 'add_shop'})(Home);
export default HomeForm;

